<template>
        <el-form :inline="true" :model="formData" ref="userFormRef" :rules="rules">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="formData.name" placeholder="请输入姓名" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model.number="formData.age" placeholder="请输入年龄" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex">
                        <el-select style="width: 180px;" v-model="formData.sex" placeholder="请选择">
                            <el-option label="男" value="0" />
                            <el-option label="女" value="1" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出生日期" prop="birth">
                        <el-date-picker value-format="YYYY-MM-DD" v-model="formData.birth" type="date" placeholder="请输入"
                            style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="formData.address" placeholder="请输入地址" clearable />
                </el-form-item>
            </el-row>
            <el-row style="justify-content: flex-end;">
                <el-form-item>
                    <el-button type="primary" @click="onSubmit()">确定</el-button>
                    <el-button type="primary" @click="resetForm(userFormRef)">重置</el-button>
                </el-form-item>
            </el-row>
        </el-form>
</template>


<script setup>
import { reactive, ref } from 'vue'
import { tabelListApi, userListApi, addUserApi, editUserApi, delUserApi } from '@/service/userListApi.js';

const userFormRef = ref();
const props = defineProps({
    dialogVisible: Boolean,
    formData: Object,
    formTitle: String,
    getUserList: Function, config: Object
});
const emit = defineEmits(['update:dialogVisible']);
const rules = reactive({
    name: [{ required: true, whitespace: true, message: '姓名不能为空', trigger: 'blur' }],
    age: [
        { required: true, message: '年龄不能为空' },
        { type: 'number', message: '年龄必须为数字' },
    ],
    sex: [
        { required: true, whitespace: true, message: '性别不能为空', trigger: 'blur' }
    ],
    birth: [{ required: true, whitespace: true, message: '出生日期不能为空', trigger: 'blur' },
    ],
    address: [{ required: true, message: '地址不能为空' },
    ]

})
const onSubmit = () => {
    if (!userFormRef.value) return;
    userFormRef.value.validate(async valid => {
        if (valid) {
            if (props.formTitle === 'add') {
                let res = await addUserApi(props.formData)
                if (res.code === 200) {
                    props.dialogVisible = false;
                    resetForm(userFormRef.value)
                    await props.getUserList(props.config)

                }
            } else {

                // formData.sex == '男' ? (formData.sex = 0) : (formData.sex = 1);

                let res = await editUserApi(formData)
                if (res.code === 200) {
                    props.dialogVisible = false;
                    resetForm(userFormRef.value)
                    getUserList(props.config)
                }
            }
        } else {
            ElMessage({
                showClose: true,
                message: '请输入正确信息',
                type: 'error'
            })
        }
    })
}

const resetForm = (form) => {
    form.resetFields()
}
</script>


<style lang='scss' scoped></style>